<template>
  <div id="app">
    <table>
      <tr>
        <th>欢迎光临水果店</th>
      </tr>
      <tr>
        <td v-html="fruit"></td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input type="text" v-model.number="num" /></td>
      </tr>
      <tr>
        <td><button @click="fn(num)">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单：总价{{ all }}元,折后价{{ zhe }}元,省了{{ all - zhe }}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruit: "苹果10元/斤，打8折",
      num: 0,
      all: 0,
      zhe: 0,
    };
  },
  methods: {
    fn(num) {
      if (!num) return alert("不能为0，重新输入");
      this.all = 10 * num;
      this.zhe = 8 * num;
    },
  },
};
</script>

<style>
#app {
  margin-top: 20px;
}
table {
  width: 500px;
}
th {
  font-size: 25px;
}
td {
  border: 1px solid #000;
  height: 50px;
  text-align: center;
}
</style>